<template>
  <div class="index-list-edit-box-center tl">
    <div>
      <moduleNavbarShow />
    </div>
    <div id="htmlCanvas" ref="htmlCanvas" :class="{ editActiveBox: active != '' }">
      <!-- 头部信息 -->
      <template v-if="$route.query.id == 5">
        <!-- <div @click="toActive('slides')" class="border-box" :class="{ borderActive: active == 'top' }" ref="moduletop" v-if="pageObj.tuanzhang == 1">
          <moduleDeliveryTopShow></moduleDeliveryTopShow>
        </div> -->
        <!-- <div @click="toActive('slides')" class="border-box" :class="{ borderActive: active == 'top' }" ref="moduletop">
          <moduleTopShowNew></moduleTopShowNew>
        </div> -->
        <!-- <div @click="toActive('slides')" class="border-box">
          <moduleSlidesShow
            :class="{ borderActive: active == 'slides' }"
          ></moduleSlidesShow>
        </div> -->
      </template>

      <template v-else>
        <div @click="toActive('top')" class="border-box" :class="{ borderActive: active == 'top' }" ref="moduletop">
          <moduleTopShow></moduleTopShow>
        </div>
        <div @click="toActive('slides')" class="border-box">
          <moduleSlidesShow :class="{ borderActive: active == 'slides' }"></moduleSlidesShow>
        </div>
      </template>

      <div class="border-box partbox" :class="{ borderActive: active == 'menu' }" @click="toActive('menu')" style="margin-top: 10px">
        <moduleMenuShow></moduleMenuShow>
        <div class="allbanner_right" v-show="active == 'menu'">
          <i class="el-icon-plus" @click.stop="insertbanner(-1)"></i>
        </div>
      </div>
      <div v-for="(item, i) in allbanner" :key="i" @click="setbannerindex(item.types, i)" class="allbanner_item partbox" :class="{
          borderActive: active == item.types && bannerNowIndex == i,
        }" :ref="'module-' + i">
        <!-- <span>模块{{ i }}{{ item.types || "---" }}{{ item.links }}</span> -->
        <div class="allbanner_right" v-show="bannerNowIndex == i">
          <i class="el-icon-plus" @click.stop="insertbanner(i)"></i>
          <i class="el-icon-top" @click.stop="sortindex(i, 'up')" v-show="i != 0 && allbanner.length != 1"></i>
          <i class="el-icon-bottom" @click.stop="sortindex(i, 'down')" v-show="i != allbanner.length - 1 && allbanner.length != 1"></i>
          <i class="el-icon-close" @click.stop="removebanner(i, item.id)"></i>
        </div>

        <div v-if="item.types == 'banner'">
          <moduleBannerShow :index="i"></moduleBannerShow>
        </div>
        <div v-else-if="item.types == 'text'">
          <moduleTextShow :index="i"></moduleTextShow>
        </div>

        <div v-else-if="item.types == 'product'">
          <moduleProductShow :index="i"></moduleProductShow>
        </div>
        <div v-else-if="item.types == 'news'">
          <moduleNewsShow :index="i"></moduleNewsShow>
        </div>
        <div v-else-if="item.types == 'spike'">
          <moduleSpikeShow :index="i"></moduleSpikeShow>
        </div>
        <div v-else-if="item.types == 'supplier'">
          <moduleSupplierShow :index="i"></moduleSupplierShow>
        </div>
        <div v-else-if="item.types == 'cityinfo'">
          <moduleCityinfoShow :index="i"></moduleCityinfoShow>
        </div>
        <div v-else-if="item.types == 'task'">
          <moduleTaskShow :index="i"></moduleTaskShow>
        </div>
        <div v-else-if="item.types == 'hotel'">
          <moduleHotelShow :index="i"></moduleHotelShow>
        </div>
        <div v-else-if="item.types == 'plane'">
          <modulePlaneShow :index="i"></modulePlaneShow>
        </div>
        <div v-else-if="item.types == 'dfy_hotel'">
          <moduleDfyHotelShow :index="i"></moduleDfyHotelShow>
        </div>
        <div v-else class="notypesbox">
          <span>请选择左侧对应的组件</span>
        </div>
      </div>

      <!-- <div
        @click="toActive('footer')"
        class="border-box"
        style="margin-top: auto"
        ref="modulebottom"
        v-if="$route.query.id != 5"
      >
        <moduleFooterShow
          :class="{ borderActive: active == 'footer' }"
        ></moduleFooterShow>
      </div> -->
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import moduleNavbarShow from "@/components/page/module/module_center/navbar_show";
import moduleTopShow from "@/components/page/module/module_center/top_show";
import moduleDeliveryTopShow from "@/components/page/module/module_center/delivery_top_show";
import moduleTopShowNew from "@/components/page/module/module_center/top_show_new";
import moduleSlidesShow from "@/components/page/module/module_center/slides_show";
import moduleMenuShow from "@/components/page/module/module_center/menu_show";
import moduleBannerShow from "@/components/page/module/module_center/banner_show";
import moduleTextShow from "@/components/page/module/module_center/text_show";
import moduleProductShow from "@/components/page/module/module_center/product_show";
import moduleNewsShow from "@/components/page/module/module_center/news_show";
import moduleSpikeShow from "@/components/page/module/module_center/spike_show";
import moduleSupplierShow from "@/components/page/module/module_center/supplier_show";
import moduleFooterShow from "@/components/page/module/module_center/footer_show";
import moduleCityinfoShow from "@/components/page/module/module_center/cityinfo_show";
import moduleTaskShow from "@/components/page/module/module_center/task_show";
import moduleHotelShow from "@/components/page/module/module_center/hotel_show";
import modulePlaneShow from "@/components/page/module/module_center/plane_show";
import moduleDfyHotelShow from "@/components/page/module/module_center/dfy_hotel_show";

export default {
  data() {
    return {
      text: "文本",
    };
  },
  components: {
    moduleTopShow,
    moduleDeliveryTopShow,
    moduleNavbarShow,
    moduleSlidesShow,
    moduleMenuShow,
    moduleBannerShow,
    moduleTextShow,
    moduleProductShow,
    moduleNewsShow,
    moduleSpikeShow,
    moduleSupplierShow,
    moduleFooterShow,
    moduleCityinfoShow,
    moduleTaskShow,
    moduleHotelShow,
    modulePlaneShow,
    moduleDfyHotelShow,
    moduleTopShowNew,
  },
  computed: {
    ...mapState({
      pageObj: (state) => state.modulePage.moduledata,
      active: (state) => state.modulePage.active,
      allbanner: (state) => state.modulePage.allbanner,
      bannerNowIndex: (state) => state.modulePage.bannerNowIndex,
    }),
  },
  created() {},
  mounted() {},
  methods: {
    scroolTopORBottom(type) {
      // type 0 top 1 bottom
      if (type == 0) {
        console.log(this.$refs.moduletop);
        if (this.$refs.moduletop) {
          this.$refs.moduletop.scrollIntoView();
        }
      } else {
        this.$refs.modulebottom.scrollIntoView();
      }
    },
    sortindex(i, status) {
      //排序
      var index2 = "";
      if (status == "up") {
        this.$store.commit("setbannerNowIndex", i - 1);
        index2 = i - 1;
      } else {
        this.$store.commit("setbannerNowIndex", i + 1);
        index2 = i + 1;
      }
      this.$store.commit("sequencebanner", {
        index1: i,
        index2: index2,
        status: status,
      });
    },
    removebanner(i, id) {
      this.$confirm("是否要删除该模块?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$store.commit("remnovebanner", { index: i, id: id || 0 });
      });
    },
    insertbanner(i) {
      this.$store.commit("insertbanner", {
        val: {
          banner: [],
          show: "1",
          style: "",
          title: "",
          title_en: "",
          types: "",
          links: "",
          text: "",
          introduction: "",
        },
        index: i,
      });
      if (this.$refs["module-" + i][0]) {
        this.$refs["module-" + i][0].scrollIntoView();
      }
    },
    setbannerindex(type, index) {
      this.$store.commit("setbannerNowIndex", index);
      this.$store.commit("setActive", type);
    },

    toActive(type, obj, i) {
      this.$store.commit("setActive", type);
    },
  },
};
</script>

<style lang="less">
.editActiveBox {
  // padding-bottom: 50px;
}
#htmlCanvas {
  min-height: 600px;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
}
#htmlCanvas .new-index-footer-box {
  position: absolute;
  bottom: 2px;
  width: 375px;
  height: 50px;
  z-index: 99;
}
.editActive {
  position: relative !important;
}
.index-list-edit-box-center {
  width: 100%;
  margin: 20px 0 0;
  background-color: #f8f8f8;

  > div {
    width: 377px;

    border: 1px solid #ddd;
    margin: 0 auto;
    background-color: #f4f4f4;
    // position: relative;
    // padding-bottom: 50px;
    height: 100%;
    > div {
      position: relative;
    }
  }
}
.partbox {
  // margin-top: 10px;
}
.border-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: 1px solid transparent;
}
// .border-box:hover::before {
//   z-index: 999;
//   border: 1px dashed royalblue;
// }
.borderActive {
  // z-index: 999;
  border: 1px dashed royalblue;
}
.new_phone_part {
  position: relative;
}

.allbanner_right {
  width: 200px;
  position: absolute;
  right: -210px;
  top: 0px;
  font-size: 22px;
  > i {
    color: #409eff;
    background-color: rgba(255, 255, 255, 0.5);
    margin-right: 10px;
    padding: 5px;
  }
}
.notypesbox {
  width: 100%;
  min-height: 200px;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
.boxshow {
  min-height: 100px;
  // background-color: #ffffff;
}
.white_bj {
  background-color: #ffffff;
}

.new_phone_title_shop {
  width: 100%;
  background-color: #ffffff;
  height: 40px;
  margin: 0 auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  padding: 0 10px;
  .new_phone_title_left {
    width: 70%;
    > p {
      font-size: 18px;
      color: #2f2f2f;
      font-weight: bold;
      text-align: left;
      > span {
        font-size: 12px;
        color: #d4d4d4;
        font-weight: 400;
      }
    }
  }
  .new_phone_title_right {
    width: 30%;
    > p {
      font-size: 18px;
      color: #cccccc;
      font-weight: bold;
      text-align: right;
    }
  }
}
</style>
